How to use vue-my-table

This blog describes how to use vue-my-table components.

Install

1
2
3
npm install vue-my-table or 
<script src="vueMyTable.umd.js"></script>
<link rel="stylesheet" type="text/css" href="vueMyTable.css">

Not support yarn add for now.

Use in vue project

1
2
3
4
5
6
7
8
import {vueMyTable} from 'vue-my-table'
import 'vue-my-table/lib/vueMyTable.css'
export default {
  name: 'app',
  components: {
    vueMyTable
  }
}

parameters

Object for param

Props/methods Type Default Description
columns Array Column of the table, please refer to this table
sortColumn String - Default sort column name
sortOrder String - Default sort type 'asc' or 'desc'
height Int - If set height to the table, the header will be fixed and scrollbar will be shown in body of the table.
detailRowComponentName String - component for the expand detail row
Striped Boolean false Striped table makes it easier to distinguish different rows, false by default

Object for columns

Name Type Default Description
index String - index name for the tr in table, it should be a key in json data, such as 'id'
isCheckbox Boolean false Show checkbox in the column, if it is set to true, there is no need to set value for the other parameters
isDetailRow Boolean - Show expand icon in the column, if it is set to true, there is no need to set value for the other parameters
label String - header of the column
sortable Boolean false Support sort for this column
width Int - width for this column, it is percent, not PX
callback function - if set callback for this column, the content of this column will be return value of the callback function,
and the html tag will be render in the return value, so to prevent XSS injection, make sure the html tags such as '<' and '>' have been escaped before return.
component_name String - If callback can not match your requirement, you can pass a component to the column and do anything you want in this component

How to use

Use with local data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
new Vue({
	el:"#app",
	  data:function(){
	    return {
	      param:{
	        columns:[
	          {
	            index:"id",isCheckbox:true
	          },
	          {
	            index:"id",isDetailRow:true
	          },
	          {
	            index:"name",label:"Name",sortable:true,width:30
	          },
	          {
	            index:"sender",label:"Sender",sortable:true,width:30,callback:this.formatSender
	          },
	          {
	            index:"comments",label:"comments",sortable:false,width:38,component_name:"comments"
	          }
	        ],
	        dataSet:[
	          {
	            id:1,name:"aaa",sender:"aaa@domain.com","comments":"this is a test"
	          },
	          {
	            id:2,name:"bbb",sender:"bbb@domain.com","comments":"this is a test"
	          },
	          {
	            id:4,name:"ccc",sender:"ccc@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:4,name:"ddd",sender:"ddd@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:5,name:"eee",sender:"eee@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:6,name:"fff",sender:"fff@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:7,name:"ggg",sender:"ggg@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:9,name:"hhh",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:10,name:"iii",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:11,name:"jjj",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:12,name:"kkk",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:13,name:"lll",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:14,name:"mmm",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:15,name:"nnn",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:16,name:"ooo",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:17,name:"ppp",sender:"hhh@domain.com","comments":"this is a test"
	          }
	          ,{
	            id:18,name:"qqq",sender:"hhh@domain.com","comments":"this is a test"
	          }
	        ],
	        sortOrder:"asc",
	        sortColumn:"name",
	        height:300,
	        detailRowComponentName:"col-detail",
	        stripe:true  
	      }
	    }
	  },
	methods:{
	    reloadTable:function(){
	      this.local_param.reloadFlag = !this.local_param.reloadFlag;
	    },
	    formatSender:function(cell_value,row){
	      return '<b style="color:red;">'+cell_value+'</b>';
	    }   			
	}
});

 Name Sender comments
aaa aaa@domain.com
 bbb bbb@domain.com
 ccc ccc@domain.com
 ddd ddd@domain.com
 eee eee@domain.com
 fff fff@domain.com
 ggg ggg@domain.com
 hhh hhh@domain.com
 iii hhh@domain.com
 jjj hhh@domain.com
Records: 1 - 10 / 17
10 per page
/ 2


Use with server data

Run node server.js in server folder in github
The table will be same with above local data sample.

1
node server.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
new Vue({
	el:"#app",
	  data:function(){
	    return {
	      param:{
	        columns:[
	          {
	            index:"id",isCheckbox:true
	          },
	          {
	            index:"id",isDetailRow:true
	          },
	          {
	            index:"name",label:"Name",sortable:true,width:30
	          },
	          {
	            index:"sender",label:"Sender",sortable:true,width:30,callback:this.formatSender
	          },
	          {
	            index:"comments",label:"comments",sortable:false,width:38,component_name:"comments"
	          }
	        ],
	        sortOrder:"asc",
	        sortColumn:"name",
	        height:300,
	        detailRowComponentName:"col-detail",
	        stripe:true,
	        mode:"server",
	        url:"http://lcaolhost:3000" 
	      }
	    }
	  },
	methods:{
	    reloadTable:function(){
	      this.local_param.reloadFlag = !this.local_param.reloadFlag;
	    },
	    formatSender:function(cell_value,row){
	      return '<b style="color:red;">'+cell_value+'</b>';
	    }   			
	}
});